<template>
  <div class="layout" id="layout-body">
    <div class="body">
      <!-- 返回链接 -->
      <el-link v-show="activeIndex !== 3" :icon="ArrowLeft" :underline="false" @click="goBack"
        >返回登录页</el-link
      >
      <!-- 进度条 -->
      <el-steps style="width: 600px" :active="activeIndex" align-center>
        <el-step title="输入手机号码" />
        <el-step title="设置新密码" />
        <el-step title="完成" />
      </el-steps>
      <!-- 表单内容 -->
      <el-form
        v-if="activeIndex !== 3"
        ref="formRef"
        style="width: 250px"
        :model="dataForm"
        status-icon
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
      >
        <!-- 输入手机号 -->
        <template v-if="activeIndex === 1">
          <el-form-item prop="phone">
            <el-input v-model="dataForm.phone" type="text" placeholder="请输入手机号" />
          </el-form-item>
          <el-form-item prop="code">
            <template style="display: flex">
              <el-input v-model="dataForm.code" type="text" placeholder="请输入验证码" />
              <el-button @click="getCode">{{
                totalSeconds === second ? '获取验证码' : second
              }}</el-button>
            </template>
          </el-form-item>
          <el-form-item>
            <el-button style="width: 600px" type="primary" @click="handleNext('code', formRef)"
              >进行下一步</el-button
            >
          </el-form-item>
        </template>
        <!-- 设置新密码 -->
        <template v-if="activeIndex === 2">
          <el-form-item prop="password">
            <el-input v-model="dataForm.password" type="password" placeholder="请输入新密码" />
          </el-form-item>
          <el-form-item prop="confirmPW">
            <el-input v-model="dataForm.confirmPW" type="password" placeholder="再次输入新密码" />
          </el-form-item>
          <el-form-item>
            <el-button style="width: 600px" type="primary" @click="handleNext('pwd', formRef)"
              >找回密码</el-button
            >
          </el-form-item>
        </template>
      </el-form>
      <!-- 完成 -->
      <template v-else>
        <el-result icon="success" title="密码修改成功" sub-title="请跳转登录">
          <template #extra>
            <el-button type="primary" @click="goBack">Back</el-button>
          </template>
        </el-result>
      </template>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { ArrowLeft } from '@element-plus/icons-vue'

const activeIndex = ref(1)
const totalSeconds = ref(60) // 发送总秒数
const second = ref(60) // 当前秒数
const timerId = ref(null) // 定时器id
const result = ref('') //验证码
const formRef = ref()

const dataForm = reactive({
  phone: '',
  code: '',
  password: '',
  confirmPW: ''
})

// 判断两次密码是否一致
const checkPW = (rule, value, callback) => {
  console.log(rule, value, callback)

  if (value === '') {
    callback(new Error('Please input the password again'))
  } else if (value !== dataForm.password) {
    dataForm.confirmPW = ''
    callback(new Error("Two inputs don't match!"))
  } else {
    callback()
  }
}

const rules = ref({
  phone: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    { min: 11, max: 11, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  code: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { min: 4, max: 4, message: '请输入正确的验证码', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, max: 20, message: '请输入6-20位密码', trigger: 'blur' }
  ],
  confirmPW: [
    { validator: checkPW, trigger: 'blur' },
    { required: true, message: '请再次输入新密码', trigger: 'blur' },
    { min: 6, max: 20, message: '请输入6-20位密码', trigger: 'blur' }
  ]
})

// 返回登录页
const emits = defineEmits(['close'])
const goBack = () => {
  emits('close')
}

// 获取验证码
const getCode = () => {
  if (!timerId.value && totalSeconds.value === second.value) {
    // 开启定时器
    timerId.value = setInterval(() => {
      second.value -= 1
      if (second.value === 0) {
        timerId.value = null
        second.value = totalSeconds.value
        clearInterval(timerId.value)
      }
    }, 1000)
  }

  // 发送网络请求
  result.value = '1234'

  // 提示信息
  ElNotification({
    title: '提示',
    message: '验证码发送成功,请注意查收喔~'
  })
}

// 跳转下一步
const handleNext = async (val, formEl) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    // 判断表单输入是否满足要求
    if (valid) {
      if (val === 'code' && dataForm.code === result.value) {
        activeIndex.value += 1
      } else if(dataForm.code !== result.value) {
        ElNotification({
          title: '提示',
          message: '验证码输入错误,请重新输入~'
        })
      }

      if (val === 'pwd') {
        activeIndex.value += 1
      }
    }
  })
}

onMounted(() => {
  const DEFAULT_SCREEN = {
    width: 1920,
    height: 1580
  }
  // 只考虑长>宽的情形
  const setDOMStyle = () => {
    const dom = document.getElementById('layout-body')

    const height = (DEFAULT_SCREEN.height * window.innerHeight) / DEFAULT_SCREEN.width

    // const width = (DEFAULT_SCREEN.width * window.innerWidth) / DEFAULT_SCREEN.height
    dom.style.height = height + 'px'
    // dom.style.width = width + 'px'
  }
  window.onresize = setDOMStyle
  setDOMStyle()
})
</script>

<style lang="scss" scoped>
.layout {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #dedede;

  .body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 50%;
    height: 60%;
    background-color: #fff;
    border-radius: 10px;

    .el-link {
      position: absolute;
      top: 25px;
      left: 25px;
    }

    .el-steps {
      margin-top: 45px;
    }

    .el-form {
      margin-top: 25px;
    }

    .el-button {
      width: 90px;
    }

    :deep(.el-result) {
      padding-top: 15px;
      --el-result-title-margin-top: 10px;
      --el-result-extra-margin-top: 15px;
    }
  }
}
</style>
